<template>
    <div class="OwnerInformation">
        <div class="OwnerInformationheader">
            <p @click="back">
                <i class="el-icon-arrow-left"></i>
                <span>基本信息</span>
            </p>
        </div>
        <div class="OwnerInformationcontent">
            <ul class="baseinformation">
                <li>
                    <div class="title">
                        昵称：
                    </div>
                    <div class="contenct">
                        {{this.nickname}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        姓名：
                    </div>
                    <div class="contenct">
                        {{this.name}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        身份证号：
                    </div>
                    <div class="contenct">
                        {{this.IDcard}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        出生日期：
                    </div>
                    <div class="contenct">
                        {{this.DateofBirth}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        民族：
                    </div>
                    <div class="contenct">
                        {{this.nationality}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        婚姻状态：
                    </div>
                    <div class="contenct">
                        {{this.Marital}}
                    </div>
                </li><li>
                    <div class="title">
                        户口类型：
                    </div>
                    <div class="contenct">
                        {{this.Householdregistration}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        现住地址：
                    </div>
                    <div class="contenct">
                        {{this.Currentresidentialaddress}}
                    </div>
                </li>
            </ul>
            <ul class="baseinformation">
                <li>
                    <div class="title">
                        手机号：
                    </div>
                    <div class="contenct">
                        {{this.phonenumber}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        类型：
                    </div>
                    <div class="contenct">
                        {{this.type}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        性别：
                    </div>
                    <div class="contenct">
                        {{this.sex}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        户籍所在地：
                    </div>
                    <div class="contenct">
                        {{this.Registeredresidence}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        政治面貌：
                    </div>
                    <div class="contenct">
                        {{this.Politicalstatus}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        居住类型：
                    </div>
                    <div class="contenct">
                        {{this.Residentialtype}}
                    </div>
                </li><li>
                    <div class="title">
                        暂住证号：
                    </div>
                    <div class="contenct">
                        {{this.Temporaryresidencepermit}}
                    </div>
                </li>
                <li>
                    <div class="title">
                    </div>
                    <div class="contenct">
                    </div>
                </li>
            </ul>
        </div>
        <div class="OwnerInformationheader">
            <p>
                <i class="el-icon-arrow-lefts">*</i>
                <span> 紧急联系人</span>
            </p>
        </div>
         <div class="OwnerInformationcontent">
            <ul class="baseinformation">
                <li>
                    <div class="title">
                        姓名：
                    </div>
                    <div class="contenct">
                        {{this.emergencycontact}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        性别：
                    </div>
                    <div class="contenct">
                        {{this.Contactsex}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        住址：
                    </div>
                    <div class="contenct">
                        {{this.Contactaddress}}
                    </div>
                </li>
            </ul>
            <ul class="baseinformation">
                <li>
                    <div class="title">
                        关系：
                    </div>
                    <div class="contenct">
                        {{this.ContactRelationship}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        手机号:
                    </div>
                    <div class="contenct">
                        {{this.Contactphonemunber}}
                    </div>
                </li>
                <li>
                    <div class="title">
                    </div>
                    <div class="contenct">
                    </div>
                </li>
            </ul>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>当前未绑定业主信息，请绑定后查看</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return{
            dialogVisible: false,//对话框
            nickname:'一缕青烟',
            name:'赵小刚',
            IDcard:'23923920483943848938',
            DateofBirth:'1980-08-02',
            nationality:'汉族',
            Marital:'未婚',
            Householdregistration:'城镇户口',
            Currentresidentialaddress:' 北京北京市东城区万象城1号楼1单元3203 ',
            phonenumber:' 13013001300 ',
            type:' 业主 ',
            sex:' 男 ',
            Registeredresidence:' 北京 ',
            Politicalstatus:'共青团员',
            Residentialtype:'长居',
            Temporaryresidencepermit:' 23923290932039209 ',
            emergencycontact:' 李苗 ',
            ContactRelationship:'朋友',
            Contactsex:'男',
            Contactphonemunber:' 13013000130 ',
            Contactaddress:' 北京北京市东城区万象城1号楼1单元2903 '
        }
    },
    components:{
        ...mapState(['houseinginfomation'])
    },
    methods:{
        back(){
            this.$router.go(-2)
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        }
    },
    mounted(){
        if(this.$route.query.data){
            this.name=this.$route.query.data.name
            this.IDcard=this.$route.query.data.IDcard   
            this.DateofBirth=this.$route.query.data.DateofBirth
            this.nationality=this.$route.query.data.nation
            this.Marital=this.$route.query.data.maritalstatus
            this.Householdregistration=this.$route.query.data.Householdregistrationtype
            this.Currentresidentialaddress=this.$route.query.data.Currentresidentialaddress
            this.phonenumber=this.$route.query.data.phonenumber
            this.type=this.$route.query.data.ownertype
            this.sex=this.$route.query.data.sex=='1'?'男':'女'
            this.Registeredresidence=this.$route.query.data.Registeredresidence
            this.Politicalstatus=this.$route.query.data.Politicalaffiliation
            this.Residentialtype=this.$route.query.data.Residentialtype
            this.Temporaryresidencepermit=this.$route.query.data.TemporaryResidencePermit
            this.emergencycontact=this.$route.query.data.ContactName
            this.ContactRelationship=this.$route.query.data.Relationship
            this.Contactsex=this.$route.query.data.radio=='1'?'男':'女'
            this.Contactphonemunber=this.$route.query.data.contactphone
        }else{
            if(this.$store.state.houseinginfomation.owner_id){
                fetch(`http://127.0.0.1/owner?id=${this.$store.state.houseinginfomation.owner_id}`).then(res=>res.json()).then(res1=>{
                    // console.log(res1,5555555555555)
                    this.name=res1[0].name
                }).catch(err=>{
                    console.log(err)
                })
            }else{
                this.dialogVisible=true
            }
        }
        
        
    }
}
</script>

<style lang="scss" scoped>
    .OwnerInformation{
        width: 100%;
        padding: 10px 30px 30px;
        .OwnerInformationheader{
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #666;
            font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
            font-weight: 700;
            .el-icon-arrow-left{
                margin-right: 5px;
                color: #666 !important;
                font-weight: 700 !important;
            }
            .el-icon-arrow-lefts{
                color: #FF3B30;
            }
        }
        .OwnerInformationcontent{
            width: 100%;
            display: flex;
            .baseinformation{
                width: 600px;
                li{
                    display: flex;
                    align-items: center;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700;
                    font-style: normal;
                    font-size: 12px;
                    color: #666666;
                    .title{
                        width: 120px;
                        height: 40px;
                        line-height: 40px;
                        text-align: right;
                        padding-right: 20px;
                        background-color: #f5f5f5;
                        border: 1px solid rgb(233, 233, 233);
                        box-sizing: border-box;
                    }
                    .contenct{
                        width: 480px;
                        height: 40px;
                        line-height: 40px;
                        padding-left: 20px;
                        font-weight: 400;
                        box-sizing: border-box;
                        border: 1px solid rgb(233, 233, 233);
                    }
                }
            }
        }
    }
</style>